<template>
  <div class="flex-content">
    <!-- 头部 -->
    <div class="section-header flex-alignc-justifyb">
      <div>报表</div>
    </div>
    <div class="flex-main">
      <div class="flex-content bgfff h100 pd-20 scroll-y">
        <a-tabs default-active-key="1" tab-position="top" @change="callback">
          <a-tab-pane key="1" tab="生成报表">
            <div class="scroll-y">
              <a-form-model ref="form" :model="form" :rules="rules">
                <a-form-model-item label="选择电站">
                  <a-radio-group v-model="form.stationType" style="width: 100%">
                    <a-radio value="1" :style="{ display: 'block' }"
                      >全体电站</a-radio
                    >
                    <a-radio
                      value="2"
                      :style="{ display: 'block' }"
                      class="radio-style"
                    >
                      选择具体的电站
                      <div v-if="form.stationType == 2" class="tagBox-wrap">
                        <template v-if="stationShow.length > 0">
                          <div class="member-box" v-for="i in stationShow">
                            <div class="station-text">{{ i.stationName }}</div>
                            <a-icon
                              type="close"
                              class="close-icon"
                              @click="deleteStation(i.id)"
                            />
                          </div>
                        </template>
                        <a-button
                          type="link"
                          icon="plus"
                          size="small"
                          @click="$refs.StationModal.openModal()"
                        >
                          电站
                        </a-button>
                      </div>
                    </a-radio>
                  </a-radio-group>
                </a-form-model-item>
                <a-form-model-item label="选择第一个抄表日期" prop="startTime">
                  <a-date-picker
                    :allowClear="false"
                    format="YYYY-MM-DD"
                    v-model="form.startTime"
                  />
                </a-form-model-item>
                <a-form-model-item label="选择第二个抄表日期" prop="endTime">
                  <a-date-picker
                    :allowClear="false"
                    format="YYYY-MM-DD"
                    v-model="form.endTime"
                  />
                </a-form-model-item>
                <a-form-model-item label="报表文件名称" prop="reportTitle">
                  <a-input
                    style="width: 200px"
                    v-model="form.reportTitle"
                  ></a-input>
                </a-form-model-item>
              </a-form-model>
            </div>
          </a-tab-pane>
        </a-tabs>
        <div class="bottom-box">
          <a-button type="primary" @click="exportFile">导出</a-button>
        </div>
      </div>
    </div>

    <!-- 电站选择弹窗 -->
    <!-- @onSubmit="onSubmit" 选择回调 -->
    <StationModal
      ref="StationModal"
      :stationList.sync="form.stationList"
      @onSubmit="getStation"
    ></StationModal>
  </div>
</template>

<script>
import { downloadReport } from "@/api/statement.js";
import moment from "moment";
import { exportDown } from "@/utils/index";
export default {
  data() {
    return {
      form: {
        reportTitle: "",
        stationType: "1",
        startTime: "",
        endTime: "",
        stationList: [],
      },
      rules: {
        reportTitle: [
          {
            required: true,
            message: "请填写报表文件名称",
            trigger: "blur",
          },
        ],
        startTime: [
          {
            required: true,
            message: "请选择第一个抄表日期",
            trigger: ["blur", "change"],
          },
        ],
        endTime: [
          {
            required: true,
            message: "请选择第二个抄表日期",
            trigger: ["blur", "change"],
          },
        ],
      },
      stationShow: [],
    };
  },
  methods: {
    callback(key) {
      console.log(key);
    },
    deleteStation(id) {
      this.form.stationList = this.form.stationList.filter((item) => {
        return item != id;
      });
      this.stationShow = this.stationShow.filter((item) => {
        return item.id != id;
      });
    },
    getStation(data) {
      this.stationShow = data;
      console.log(data);
    },
    exportFile() {
      if (this.form.stationType == 2 && this.form.stationList.length == 0) {
        return this.$message.warning("请选择电站");
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          let reuqestData = {
            stationType: this.form.stationType,
            startTime: moment(this.form.startTime).format(
              "YYYY-MM-DD 00:00:00"
            ),
            endTime: moment(this.form.endTime).format("YYYY-MM-DD 00:00:00"),
            reportTitle: this.form.reportTitle,
            stationEntities:
              this.form.stationType == 1
                ? null
                : this.form.stationList.map((item) => {
                    return { id: item };
                  }),
          };
          // if (this.form.stationType == 1) {
          //   delete reuqestData.stationEntities;
          // }
          downloadReport(reuqestData).then((res) => {
            exportDown(res, this.form.reportTitle);
            this.$refs.form.resetFields();
            this.form.stationList = [];
            this.stationShow = [];
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ant-tabs {
  display: flex;
  flex-direction: column;
  /deep/.ant-tabs-top-content {
    height: 0;
    flex: 1;
  }
}
/deep/.ant-form-item-control {
  line-height: inherit !important;
}
/deep/.ant-form-item {
  margin-bottom: 10px;
}
/deep/.radio-style {
  margin-top: 16px;
}
.checkbox-box {
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.tagBox-wrap {
  position: relative;
  border: 1px solid #d9d9d9;
  line-height: initial;
  margin-top: 10px;
  margin-left: 32px;
  border-radius: 4px;
  padding: 5px 10px;
  width: 50%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .member-box {
    height: 22px;
    padding: 0 8px;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    margin-right: 16px;
    .station-text {
      max-width: 480px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
    }
    .close-icon {
      font-size: 12px;
      margin-left: 12px;
      cursor: pointer;
      &:hover {
        color: #ff7875;
      }
    }
  }
}
.bottom-box {
  padding-top: 26px;
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
</style>